<template>
  <view class="drop-container">
    <template v-for="(item, index) in dataList">
      <view class="item" :key="index" @tap="gotoDetail(item)">
        <view class="title">
          {{ item.department?item.department.name:'' }}
        </view>
        <!--        <view class="year" v-if="item.title && item.title.id">
          {{item.created_at}}
        </view> -->
        <view class="year">
          {{item.created_at}}
        </view>
      </view>
    </template>
    <u-loadmore :status="loadingStatus" marginTop="20" />
  </view>
</template>

<script>
  import props from './props';
  export default {
    name: "DropdownList",
    mixins: [ props ],
    data() {
      return {
        dataList: []
      };
    },
    methods: {
      gotoDetail( item ) {
        this.$emit( 'click', item )
      },
      setConfigOptions() {
        const keys = Object.entries( this.configOptions )
        this.dataList = this.dropList.map( item => {
          keys.forEach( ( [ k, v ] ) => ( item[ k ] = item[ v ] ) )
          return item
        } )
      }
    }
  }
</script>

<style lang="scss" scoped>
  .drop-container {
    padding-left: 30rpx;
    padding-right: 30rpx;
    padding-bottom: 20rpx;

    .item {
      padding-top: 26rpx;
      padding-bottom: 26rpx;
      border-bottom: 1px solid #f5f5f6;

      .title {
        color: #333;
        font-size: 28rpx;
        font-weight: 700;
        margin-bottom: 16rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .year {
        color: #929292;
        font-size: 26rpx;
      }
    }
  }
</style>